<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld :hIndex="tabIndex?tabIndex:'1'"/>
    <button data-id='1' @click="changeTabs">用户1</button>
    <button data-id='2' @click="changeTabs">配置2</button>
    <button data-id='3' @click="changeTabs">角色3</button>
    <button data-id='4' @click="changeTabs">补偿4</button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  data(){
    return {
      tabIndex:''
    }
  },
  methods:{
    changeTabs(e){
      this.tabIndex = e.target.dataset.id?e.target.dataset.id:'1'
      console.log(this.tabIndex)
    }
  }

}
</script>
